<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://cdn.highcharts.com.cn/highcharts/6.1.0/highcharts.js"></script>
  <script src="http://cdn.highcharts.com.cn/highcharts/6.1.0/highcharts-more.js"></script>
  <script src="http://cdn.highcharts.com.cn/highcharts/6.1.0/modules/exporting.js"></script>
</head>
<body>
  <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
  <script>
    var chart = Highcharts.chart('container', {
      chart: {
        zoomType: 'xy'
      },
      title: {
        text: '误差图'
      },
      xAxis: [{
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      }],
      yAxis: [{ // Primary yAxis
        labels: {
          format: '{value} °C',
          style: {
            color: Highcharts.getOptions().colors[1]
          }
        },
        title: {
          text: '温度',
          style: {
            color: Highcharts.getOptions().colors[1]
          }
        }
      }],
      tooltip: {
        shared: true,
        crosshairs: [{
          width: 1,
          color: '#333'
        }, {
          width: 0,
          color: 'green'
        }],
        formatter: function () {
          console.log( this.points, this.x, this.y)
          let result = ''
          if(this.x === '六月'){
            result = `
            <h3>${ this.x }</h3>
            <br/>
            <p>温度： ${this.y}</p>
            `
          }
          console.log(result)
          return result
        }
      },
      plotOptions: {
        series: {
          color: '#333',
          marker: {
            enabled: false // 关闭数据点
          }
        }
      },
      series: [{
        name: '降水',
        type: 'spline',
        data: [ 25.2, 26.5, 23.3, 18.3, 13.9, 19.6, null, null, null, null, null, null],
        tooltip: {
          pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
        }
      // }, {
      //   name: '降雨误差',
      //   type: 'errorbar',
      //   data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]],
      //   tooltip: {
      //     pointFormat: '(误差范围: {point.low}-{point.high} mm)<br/>'
      //   }
      }, {
        name: '温度',
        type: 'spline',
        dashStyle: 'ShortDot', // 点虚线
        data: [null, null, null, null, null, 19.6, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        tooltip: {
          pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
        }
      }, {
        name: '温度误差',
        type: 'errorbar', // 误差图
        dashStyle: 'ShortDot',
        data: [null, null, null, null, null, null, [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
        tooltip: {
          pointFormat: '(误差范围: {point.low}-{point.high}°C)<br/>'
        }
      }]
    });
  </script>
</body>
</html>